<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS复合选择器</title>
    <style type="text/css">
        h3 strong{color: blue;font-size: 36px;}
        strong{color: red;font-size: 16px;} 
    </style>
</head>
<body>
    
    <pre>
        复合选择器分为后代选择器、交集选择器和并集选择器。
        <ol>
            <li>后代选择器。就是把外层的标签写在前面，内层的标签写在后面，它们之间用空格分隔。
            <strong>问君能有几多愁，</strong>
            <h3>恰似一江<strong>春水</strong>向东流。</h3></li>
            后代选择器在CSS中很常用，通常用于HTML标签嵌套时，常用情况如下。
            <ol>
                <li>按标签的嵌套关系。</li>
                <li>按选择器的嵌套关系。</li>
                <li>3种选择互相嵌套关系。</li>
            </ol>
            <li>
                交集选择器。是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标签选择器，第二个必须是类选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。
                <h2>蝶恋花&#8226;庭院深深深几许</h2>
                <strong>宋&#8226;欧阳修</strong>
                <p class="txt">庭院深深深几许，杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。<strong class="txt">雨横风狂三月暮，门掩黄昏，无计留春住。</strong>泪眼问花花不语，乱红飞过秋千去。</p>
            </li>
        </ol>
    </pre>
</body>
</html>